<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品管理</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div id="app">
    <div class="panel  panel-primary">
      <div class="panel-heading">
        <h1 class="my-title panel-title">商品管理</h1>
      </div>
      <div class="panel-body">
        <form class="form-inline">
          <div class="form-group">
            <label for="id">ID:</label>
            <input disabled type="number" class="form-control" id="id" placeholder="请输入序号">
          </div>
          <div class="form-group">
            <label for="name">名字:</label>
            <input type="text" v-model="shoopName" class="form-control" id="name" placeholder="请输入产品名">
          </div>
          <button type="button" class="btn btn-default" @click="add">提交</button>
          <div class="form-group">
            <label for="keywords">关键字搜索:</label>
            <input v-model="key" type="text" class="form-control" id="keywords" placeholder="关键字">
        </div>
        </form>
      </div>
      <div v-if="search.length>0">
        <table class="table table-bordered">
          <tr>
            <th>序号</th>
            <th>名字</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,index) in search" :key="index" :class="[index%2==0?'danger':'info']">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time | dateFormat}}</td>
            <td><a href="#" @click.prevent="delet(index)">删除</a></td>
          </tr>
        </table>
      </div>
      <div v-else>
        <h1>暂无数据</h1>
      </div>
    </div>
  </div>
  </div>
</body>
<script src="../js/vue.js"></script>
<script src="./js/index.js"></script>

</html>